<template>
  <view class="viewpot">
    <wd-navbar
      fixed
      placeholder
      title="全部订单"
      left-arrow
      safeAreaInsetTop
      @click-left="handleClickLeft"
      :bordered="false"
    />
    <view class="buy-box">
      <view class="buy-address" @click="goSelectAddress">
        <view class="address-img">
          <view class="address-border">
            <image src="@/static/icon/address.png" class="border-img" mode="scaleToFill" />
          </view>
        </view>
        <!-- 如果没有选过地址 -->
        <view v-if="!addressStore.selectedAddress" class="address-title">
          <text>点击添加收货地址</text>
        </view>

        <!-- 已选地址 -->
        <view v-else class="address-title">
          <text
            >{{ addressStore.selectedAddress.address }}
            {{ addressStore.selectedAddress.contact }}</text
          >
          <view class="address-mintext">{{ addressStore.selectedAddress.fullLocation }}</view>
        </view>
        <view class="address-icon">
          <wd-icon name="arrow-right" size="22px"></wd-icon>
        </view>
      </view>
      <view class="buy-detail">
        <view class="dai-pay">
          <view class="dai-pay-left">
            <image src="@/static/prod/payimg.png" class="pay-img" mode="scaleToFill" />
          </view>
          <view class="dai-pay-center">
            <text class="day-pay-text">敬修堂防脱滋养育发洗发露</text>
            <text class="day-pay-title">控油防脱两不误 细腻丰富泡沫</text>
            <text class="day-pay-price">￥199.9</text>
          </view>
          <view class="dai-pay-right">
            <view class="dai-pay-rightBottom">
              <text>x1</text>
            </view>
          </view>
        </view>
        <view class="info-box">
          <view class="info-list">
            <view class="info-left">
              <text>运费</text>
            </view>
            <view class="info-right"> ￥0.0 </view>
          </view>
          <view class="info-list">
            <view class="info-left">
              <text>商品小计</text>
            </view>
            <view class="info-right"> ￥199.9 </view>
          </view>
          <view class="info-list">
            <view class="info-left">
              <text>运费</text>
            </view>
            <view class="info-right" @click="showCouponSheet">
              <view class="info-right-icon">
                <text>{{ selectedCouponText }}</text>
                <wd-icon name="arrow-right" size="16px"></wd-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="allow">
          <view class="allow-name">合计：</view>
          <view class="allow-price">￥199.0</view>
        </view>
      </view>
      <view class="pay-box">
        <view class="pay-method">支付方式</view>
        <view class="pay-name" @click="showAction">
          <!-- <text>微信支付</text> -->
          <text>{{ selectedPay.name }}</text>
          <wd-icon name="arrow-right" size="16px"></wd-icon>
        </view>
      </view>
    </view>
    <view class="buy-cart">
      <view class="bottom-left">
        <view>￥</view>
        <view style="font-size: 36rpx">199.9</view>
      </view>
      <view class="bottom-right">
        <button class="btn">立即支付</button>
      </view>
    </view>

    <!-- 支付方式选择 -->
    <wd-action-sheet v-model="show" title="选择支付方式" @close="close">
      <view style="padding: 30rpx">
        <view v-for="item in actions" :key="item.value" class="pay-option" @click="onSelect(item)">
          <text>{{ item.name }}</text>
          <view class="radio">
            <view class="radio-outer" :class="{ active: selectedPay.value === item.value }">
              <wd-icon
                v-if="selectedPay.value === item.value"
                name="check"
                size="24rpx"
                color="#fff"
              />
            </view>
          </view>
        </view>
      </view>
    </wd-action-sheet>

    <wd-action-sheet v-model="showCoupon" title="选择优惠券" @close="closeCoupon">
      <view class="action-divider"></view>
      <view class="coupon-top">
        <text>优惠券可叠加使用，一共3张优惠券，可抵扣</text>
        <text style="color: rgba(245, 73, 73, 1)">￥60.0</text>
      </view>
      <view style="padding: 15px">
        <view
          v-for="coupon in couponList"
          :key="coupon.id"
          class="coupon-item"
          @click="onSelectCoupon(coupon)"
        >
          <view class="coupon-box">
            <view class="coupon-left">
              <view class="coupon-price-top">
                <view>￥</view>
                <view class="coupon-price">{{ coupon.price }}</view>
              </view>
              <view class="coupon-msg">{{ coupon.msg }}</view>
            </view>
            <view class="coupon-content">
              <view class="coupon-name">{{ coupon.name }}</view>
              <view class="coupon-time">{{ coupon.time }}</view>
              <view class="coupon-desc">{{ coupon.desc }}</view>
            </view>
            <view class="coupon-right">
              <view class="radio">
                <view class="radio-outer" :class="{ active: selectedCouponId === coupon.id }">
                  <wd-icon
                    v-if="selectedCouponId === coupon.id"
                    name="check"
                    size="24rpx"
                    color="#fff"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </wd-action-sheet>
  </view>
</template>
<script setup lang="ts">
  import { useAddressStore } from '@/stores/modules/address'
  import { onMounted, ref } from 'vue'
  const addressStore = useAddressStore()
  const show = ref<boolean>(false)
  const showCoupon = ref(false)
  const selectedCouponId = ref<string | null>(null)
  const selectedCouponText = ref('')
  const handleClickLeft = () => {
    uni.navigateBack()
  }
  const goSelectAddress = () => {
    uni.navigateTo({
      url: '/pagesMember/address/address',
    })
  }
  const couponList = ref([
    {
      id: '1',
      name: '20元优惠券',
      msg: '无门槛使用',
      price: '20',
      time: '2023.03.21-2023.06.21',
      desc: '此券可与其他券叠加使用',
    },
    {
      id: '2',
      name: '25元优惠券',
      msg: '无门槛使用',
      price: '25',
      time: '2023.03.21-2023.06.21',
      desc: '此券可与其他券叠加使用',
    },
    {
      id: '3',
      name: '30元优惠券',
      msg: '无门槛使用',
      price: '30',
      time: '2023.03.21-2023.06.21',
      desc: '此券可与其他券叠加使用',
    },
  ])
  const allCoupon = () => {
    selectedCouponText.value = `${couponList.value.length}张可用`
  }
  // 默认选中微信支付
  const selectedPay = ref({ name: '微信支付', value: 'wechat' })
  // 支付方式选项
  const actions = [
    { name: '微信支付', value: 'wechat' },
    { name: '支付宝', value: 'alipay' },
    { name: '余额', value: 'balance' },
  ]
  // 打开 ActionSheet
  const showAction = () => {
    show.value = true
  }
  // 选中支付方式
  const onSelect = (item: any) => {
    selectedPay.value = item
    show.value = false
  }
  // 关闭 ActionSheet
  const close = () => {
    show.value = false
  }
  const showCouponSheet = () => {
    showCoupon.value = true
  }

  const closeCoupon = () => {
    showCoupon.value = false
  }

  const onSelectCoupon = (coupon: { id: string; name: string }) => {
    selectedCouponId.value = coupon.id
    selectedCouponText.value = coupon.name
    showCoupon.value = false
  }
  onMounted(() => {
    allCoupon()
  })
</script>
<style lang="scss">
  page {
    background: #f5f5f5;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  @import './index.scss';

  .pay-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #f5f5f5;
  }

  /* 单选圆圈 */
  .radio {
    display: flex;
    align-items: center;
  }
  .radio-outer {
    width: 40rpx;
    height: 40rpx;
    border: 4rpx solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .radio-outer.active {
    background-color: #07c160; /* 微信绿 */
    border-color: #07c160;
  }
  .action-divider {
    height: 1rpx;
    background-color: #e0e0e0;
    width: 100%;
  }
  .coupon-top {
    height: 40rpx;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .coupon-box {
    display: flex;
    flex-direction: row;
    height: 200rpx;
    flex-shrink: 0;
    background-color: #ffffff;
    margin-bottom: 30rpx;
    box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
    border-radius: 10rpx;
    .coupon-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 200rpx;
      width: 200rpx;
      background: rgba(9, 171, 79, 1);
      .coupon-price-top {
        display: flex;
        color: #fff;
        justify-content: center;
        align-items: center;
        .coupon-price {
          font-size: 80rpx;
          color: #fff;
        }
      }
      .coupon-msg {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 22rpx;
        color: #f5f5f5;
      }
    }
    .coupon-content {
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      .coupon-name {
        font-size: 28rpx;
        font-weight: 700;
      }
      .coupon-time {
        margin-top: 5rpx;
        font-size: 22rpx;
        color: rgba(153, 153, 153, 1);
      }
      .coupon-desc {
        margin-top: auto;
        font-size: 26rpx;
      }
    }
    .coupon-right {
      display: flex;
      padding: 0 30rpx;
      justify-content: center;
      align-items: center;
      margin-left: auto;
    }
  }
</style>
